<template>
  <!--设置-->
  <div id="reportDetail">
    <div class="header" @click="security">
      <div class="header_l">账号与安全</div>
      <div class="header_r">
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="header" v-if="false">
      <div class="header_l">国际化设置</div>
      <div class="header_icon">
        <div class="header_size">
          <!-- @click="showPicker" -->
          <button>中文</button>
          <!-- <mpvue-picker ref="mpvuePicker" :mode="mode" :pickerValueDefault="pickerValueDefault" @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker> -->
        </div>
        <div class="header_r">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="header footer">
      <div class="header_l" @click="lgoout">退出登录</div>
    </div>
  </div>
</template>

<script>
// import mpvuePicker from 'mpvue-picker';
import { setStorage, getStorage } from "../../utils/storage";
export default {
  // components: {
  //   mpvuePicker
  // },
  data() {
    return {
      mode: "selector",
      pickerValueArray: [
        {
          label: "中文",
          value: 1
        },
        {
          label: "英文",
          value: 2
        },
        {
          label: "泰文",
          value: 3
        },
        {
          label: "俄语",
          value: 4
        },
        {
          label: "法语",
          value: 5
        },
        {
          label: "日语",
          value: 6
        },
        {
          label: "韩语",
          value: 7
        },
        {
          label: "阿拉伯语",
          value: 8
        }
      ],
      pickerValueDefault: [1],
      userInfo: {} // 获取登录传过来的值
    };
  },
  methods: {
    security() {
      wx.navigateTo({
        url: "/pages/logout/main"
      });
    },
    lgoout() {
      this.$http
        .post({
          url: "/mobile/api/logout",
          data: { customer_id: this.userInfo.customer_id }
        })
        .then(res => {
          if (res.code == "RX0000") {
            wx.clearStorage();
            wx.reLaunch({
              url: "/pages/books/main"
            });
          }
        });
    },
    showPicker() {
      this.$refs.mpvuePicker.show();
    }
  },
  async mounted() {
    this.userInfo = await getStorage("userInfo");
  }
};
</script>

<style lang='less'>
page {
  background: rgba(249, 249, 249, 1);
}
#reportDetail {
  background: rgba(249, 249, 249, 1);
}
.header {
  width: 374px;
  height: 40px;
  background: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16.81px 0 13px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.header_l {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.header_r {
  width: 6px;
  height: 11px;
  color: #999;
}
.footer {
  justify-content: center;
  font-size: 14px;
  margin-top: 20px;
  // background-image:url('/static/imgs/juxing.png');
  background-size: 100% 100%;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 20px;
}
.header_icon {
  display: flex;
  justify-content: right;
}
.header_size {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 17px;
  padding-left: 9.57x;
}
.header_size button {
  position: relative;
  display: block;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
  font-size: 12px !important;
  text-align: center;
  text-decoration: none;
  line-height: 17px !important;
  border-radius: 5px;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  color: rgba(153, 153, 153, 1) !important;
  background-color: transparent !important;
}
.header_size button::after {
  border: none !important;
}
</style>
